<template>
  <Modal class="modal-con" v-model="value" :closable="true" title="用户添加" @on-cancel="onCancel" width="40%"
    :mask-closable="false" :transfer="false">
    <Form :model="formValidate" :rules="ruleValidate" ref="form" :label-width="labelWidth" label-position="right"
      label-colon>
      <Row :gutter="20">
        <Col span="16">
        <FormItem label="姓名" prop="realname">
          <Input v-model="formValidate.realname" clearable></Input>
        </FormItem>
        </Col>
        <Col span="16">
        <FormItem label="用户名" prop="mobilePhone">
          <Input v-model="formValidate.mobilePhone" clearable></Input>
        </FormItem>
        </Col>
        <Col span="16">
        <FormItem label="手机号码" prop="mobilePhone">
          <Input v-model="formValidate.mobilePhone" clearable></Input>
        </FormItem>
        </Col>
      </Row>
    </Form>
    <p slot="footer">
      <Button type="text" @click="onCancel">取消</Button>
      <Button type="primary" shape="circle" @click="addUser" :loading="loading.loading">添加</Button>
    </p>
  </Modal>
</template>

<script>
  import errHandler from "@/libs/err-handler";
  export default {
    components: {},
    data() {
      return {
        current: 0,
        labelWidth: 120,
        formValidate: {
          mobilePhone: "",
          realname: '',
          username: ""
        },
        ruleValidate: {
          realname: [{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '用户名不能为空',
            trigger: 'change'
          }],
          mobilePhone: [{
            required: true,
            message: '手机号码不能为空',
            trigger: 'blur'
          }]
        },
        loading: {
          loading: false,
        },
      }
    },
    props: {
      value: {
        type: Boolean,
      },
    },
    created() {

    },
    watch: {
      value(newVal) {
        if (newVal) {

        } else {
          this.formValidate.realname = "";
          this.formValidate.username = "";
          this.formValidate.mobilePhone = "";
        }
      }
    },
    methods: {
      // 关闭modal
      onCancel() {
        this.$emit('input', false)
      },
      addUser() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading.loading = true;
            let params = {
              "mobilePhone": this.formValidate.mobilePhone,
              "realname": this.formValidate.realname,
              "username": this.formValidate.mobilePhone,
            }
            this.$api.saveAccount(params, true).then(data => {
              this.loading.loading = false;
              if (data.code == '1000') {
                this.$parent.refresh();
                this.onCancel();
              } else {
                errHandler.handleResponseErr.call(this, data);
              }
            }).catch(err => {
              this.loading.loading = false;
              this.$msg.error.call(this, '添加用户失败');
            });
          } else {

          }
        })

      },
    }
  }
</script>

<style lang="less" scoped>
  .modal-con {
    .steps-con {
      display: flex;
      justify-content: center;
      padding: 24px 0;
      margin-bottom: 12px;
    }
  }
</style>